<script setup>
import { 
    SearchOutlined, 
    RedoOutlined,
    UploadOutlined, 
    DownloadOutlined,
    EditOutlined,
    EyeOutlined,
    DeleteOutlined
} from '@ant-design/icons-vue';
import { ref, onMounted } from 'vue';
import ImportExcel from '@/components/importExcel/importExcel.vue';
import { importInspect, queryExamineList, deleteExamine } from '@/api/inspectApi.js';
import HDK from '@/lib/HDK.js';

const importLoading = ref(false);
const loading = ref(false);
const tableData = ref([]);
const selectedRowKeys = ref([]);
const pagination = ref(HDK.page);
const columns = [
    {
        title: '登记号',
        dataIndex: 'admissionNumber',
        key: 'admissionNumber',
        align: 'center'
    },
    {
        title: '病案号',
        dataIndex: 'caseNumber',
        key: 'caseNumber',
        align: 'center'
    },
    {
        title: '就诊ID',
        dataIndex: 'medicalNumber',
        key: 'medicalNumber',
        align: 'center'
    },
    {
        title: '检验子项目中文名称',
        dataIndex: 'itemName',
        key: 'itemName',
        align: 'center'
    },
    {
        title: '检验值',
        dataIndex: 'itemValue',
        key: 'itemValue',
        align: 'center'
    },
    {
        title: '单位',
        dataIndex: 'itemUnit',
        key: 'itemUnit',
        align: 'center'
    },
    {
        title: '结果属性',
        dataIndex: 'resultAttribute',
        key: 'resultAttribute   ',
        align: 'center'
    },
    {
        title: '参考范围',
        dataIndex: 'referenceRange',
        key: 'referenceRange',
        align: 'center'
    },
    {
        title: '采样时间',
        dataIndex: 'sampleTime',
        key: 'sampleTime',
        align: 'center'
    },
    {
        title: '操作',
        key: 'actions',
        align: 'center'
    }
];

function onSelectChange(keys) {
    selectedRowKeys.value = keys;
}

function fetchData() {
    loading.value = true;
    queryExamineList({})
        .then(res => {
            tableData.value = res.data;
            pagination.value.total = res.count;
        })
        .finally(() => {
            loading.value = false;
        });
}

function onImportData(file) {
    importLoading.value = true;
    const formData = new FormData();
    formData.append('file', file);
    importInspect(formData)
        .then(() => {
            HDK.info('导入成功');
            fetchData();
        })
        .finally(() => {
            importLoading.value = false;
        });
}

function onDelete(record) {
    Modal.confirm({
        title: '删除检验数据',
        centered: true,
        maskClosable: false,
        content: h('span', null, [
            h('span', null, '确定删除检验数据 '),
            h('strong', { style: 'color: red' }, record.itemName),
            h('span', null, ' 吗？')
        ]),
        onOk() {
            deleteExamine()({ids: [record.id]})
                .then(res => {
                    fetchData();
                    HDK.info('删除成功');
                });
        }
    });
}

onMounted(() => {
    fetchData();
});

</script>

<template>
    <div>
        <a-card title="检索" size="small">
            <a-form layout="inline">
                <a-form-item label="登记号">
                    <a-input placeholder="请输入登记号" :disabled="loading" />
                </a-form-item>
                <a-form-item label="病案号">
                    <a-input placeholder="请输入病案号" :disabled="loading" />
                </a-form-item>
                <a-form-item label="就诊ID">
                    <a-input placeholder="请输入就诊ID" :disabled="loading" />
                </a-form-item>
                <a-form-item>
                    <a-space>
                        <a-button type="primary" :loading="loading">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            检索
                        </a-button>
                        <a-button :loading="loading">
                            <template #icon>
                                <RedoOutlined />
                            </template>
                            重置
                        </a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </a-card>
        <a-card title="列表" size="small" style="margin-top: 14px">
            <a-table 
                rowKey="id" 
                size="small" 
                :bordered="false" 
                :loading="loading" 
                :columns="columns"
                :pagination="pagination"
                :data-source="tableData" 
                :scroll="{ x: 'max-content' }"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
            >
                <template #title>
                    <a-space>
                        <a-button type="primary" @click="() => $refs.ImportExcelRef.showComponent()">
                            <template #icon><UploadOutlined /></template>
                            导入检验数据
                        </a-button>
                        <a-button>
                            <template #icon><DownloadOutlined /></template>
                            导出检验数据
                        </a-button>
                        <a-button type="primary" danger ghost :disabled="selectedRowKeys.length === 0">
                            <template #icon><DeleteOutlined /></template>
                            批量删除
                        </a-button>
                    </a-space>
                </template>
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'actions'">
                        <a-space>
                            <a-button size="small" type="primary" ghost>
                                <template #icon><EditOutlined /></template>
                                编辑
                            </a-button>
                            <a-button size="small" type="primary" danger ghost @click="onDelete(record)">
                                <template #icon><DeleteOutlined /></template>
                                删除
                            </a-button>
                            <a-button size="small">
                                <template #icon><EyeOutlined /></template>
                                查看
                            </a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-card>
        <ImportExcel ref="ImportExcelRef" title="导入患者数据" :loading="importLoading" @upload="onImportData" />
    </div>
</template>

<style lang="less" scoped>
.page-name {
    font-size: 20px;
    color: #333;
    font-weight: bold;
}

:deep(.table-striped) {
    background-color: @second-bg-color;
}
</style>